<template>
  <div id="commentManagement">
    <LEFT>
      <!-- 将内容插入到 LEFT 组件的 other 区域 -->
      <template v-slot:otherContent>
        <div class="content">
          <div class="head">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="评论名称">
                <el-input
                  v-model="formInline.content"
                  placeholder="评论名称"
                ></el-input>
              </el-form-item>
            
              <el-form-item label="评论类型">
                <el-select v-model="formInline.commentType" placeholder="评论类型">
                  <el-option label="文本" value="0"></el-option>
                  <el-option label="文件" value="2"></el-option>
                  <el-option label="图片" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建者">
                <el-input
                  v-model="formInline.createBy"
                  placeholder="创建者"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="formInline.createTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click="onSubmit"
                  icon="el-icon-search"
                  >搜索</el-button
                >
              </el-form-item>
              <!-- 重置 -->
              <el-form-item>
                <el-button
                  size="small"
                  @click="resetForm()"
                  icon="el-icon-refresh-right"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div id="center">
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              @click="handleDelete"
              style="margin-bottom: 20px"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
            <!-- 清空按钮 -->
            <el-button
              type="danger"
              @click="handleClear"
              size="small"
              style="margin-bottom: 20px"
              icon="el-icon-delete"
              >清空</el-button
            >
            <!-- 导出按钮 -->
            <el-button
              type="warning"
              @click="handleExport"
              size="small"
              style="margin-bottom: 20px"
              icon="el-icon-download"
              >导出</el-button
            >
            <el-table
              v-loading="loading"
              ref="multipleTable"
              :data="tableData"
              stripe
              tooltip-effect="dark"
              style="width: 100%"
              :row-style="{ height: '5' }"
              :cell-style="{ padding: '0' }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column
                prop="id"
                label="评论编号"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
        
              <el-table-column
                prop="content"
                label="评论名称"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="commentType"
                label="评论类型"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>

              <el-table-column
                prop="likeCount"
                label="点赞数"
                min-width="120"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <!-- 编辑 -->
              <el-table-column label="操作" min-width="180">
                <div slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.row)"
                  >
                    编辑
                  </el-button>
                </div>
                
              </el-table-column>
              
            </el-table>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </LEFT>
  </div>
</template>
      
      <script>
import { onMounted } from "vue";
import LEFT from "../../components/left/index.vue";
import TOP from "../../components/top/index.vue";
export default {
  name: "role-management",
  components: {
    LEFT,
    TOP,
  },
  data() {
    return {
      formInline: {
        content: "",
        commentType: "",
        createBy: "",
        createTime: "",
      },

      dialogVisible: false,
      savedialogVisible: false,
      tableData: [],
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      ids: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // 取出选中的数据的id
      this.ids = val.map((item) => item.id);
    },
    onSubmit() {
      this.getLoginLogData();
    },
    // 重置
    resetForm() {
      this.formInline = {
        ipaddr: "",
        username: "",
        status: "",
        time: "",
      };
    },

    handleEdit(data) {
      if (data.status === "1" || data.status === "2") {
        this.$message({
          message: "已审核的课程不能进行操作",
          type: "warning",
        });
        return;
      }
      this.$set(data, "isEditing", true);
    },

    confirmSubmitStatus(row, status) {
      const actionText = status === "1" ? "通过" : "退回";
      this.$confirm(`确认要${actionText}该课程吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: status === "1" ? "success" : "warning",
      })
        .then(() => {
          this.submitStatus(row, status);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    submitStatus(row, status) {
      row.status = status;
      let url = "/api/resources/updateStatus/" + row.id + "?status=" + status;
      this.$http
        .get(url)
        .then((res) => {
          this.$message({
            message: res.data.msg || "更新成功",
            type: "success",
          });
          row.isEditing = false;
          this.getLoginLogData();
        })
        .catch((error) => {
          console.error("更新出错:", error);
        });
    },

    handleClose() {
      this.dialogVisible = false;
      this.savedialogVisible = false;
    },
    // 删除
    handleDelete() {
      if (this.ids.length === 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }
      this.$confirm("是否删除选中的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("/api/resources/comment/deleteBatch" + this.ids)
            .then((res) => {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.getLoginLogData();
            })
            .catch((error) => {
              console.error("Error deleting data:", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 清空
    handleClear() {
      this.$message({
        message: "开发中",
        type: "info",
      });
    },
    // 导出
    handleExport() {
      this.$message({
        message: "开发中",
        type: "warning",
      });
    },
    //获取课程数据
    getLoginLogData() {
      // 开始加载状态
      this.loading = true;
      // 构建请求参数对象
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      // 如果 formInline 的属性有值，则添加到 params 中
      if (this.formInline.content !== undefined && this.formInline.content !== "") {
        params.content = this.formInline.content;
      }
  
      if (
        this.formInline.createTime !== undefined &&
        this.formInline.createTime !== ""
      ) {
        params.createTime = this.formInline.createTime;
      }

      // 发送 GET 请求
      this.$http
        .get("/api/resources/comment/listAll", { params })
        .then((res) => {
          console.log(res.data);
          // 对获取到的数据按 id 进行倒序排序
          this.tableData = res.data.rows;
          this.total = res.data.total;
        })
        .catch((error) => {
          console.error("Error fetching table data:", error);
        })
        .finally(() => {
          // 请求结束后停止加载状态
          this.loading = false;
        });
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getLoginLogData();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getLoginLogData();
    },
  },
  mounted() {
    this.getLoginLogData();
  },
};
</script>
      
      
      
      
      
  <style lang="less" scoped>
#commentManagement {
  background-color: #fff;

  /deep/ .right {
    // background-color: #fff;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .el-form-item {
    margin-right: 22px;
  }
  /deep/ .el-form-item__label {
    font-weight: bold;
  }
  /deep/ .cell {
    color: #606266;
  }
  /deep/ .el-table .el-table__row {
    height: 50px; /* 这里设置每一行的高度 */
  }

  /deep/ .el-table .el-table__cell {
    line-height: 50px; /* 确保单元格内容垂直居中 */
  }
  /deep/ .el-pagination {
    float: right;
  }
}
.cover-image {
  height: 60px;

  cursor: pointer;
  object-fit: cover;
}
</style>